<template>
  <div class="panel-wapper">
    <header class="title-header">
      <img class="logo" src="@/assets/img/panel/logo.png" alt="" />
      <img class="title" src="@/assets/img/panel/bigTitle.png" alt="" />
      <div class="time">
        <span>2023年5月22日</span>
        <span>14:18:33</span>
      </div>
      <a-select class="select" v-model:value="state.locationId" :options="state.roomList" :bordered="false" @change="handleChange"> </a-select>
    </header>
    <div class="statistics" v-for="(item, index) in state.statList" :key="index">
      <div class="stat-title background-text">{{ item.title }}</div>
      <div class="stat-content">
        <div class="stat-item" v-for="(data, index) in item.data" :key="index">
          <img :src="data.imgSrc" width="72" alt="" />
          <div>
            <span class="stat-value background-text">{{ data.value }}</span>
            <div class="stat-label">{{ data.name }}</div>
          </div>
        </div>
      </div>
    </div>
    <a-row class="analysis" :gutter="16">
      <a-col :span="6">
        <ArchiveType class="analysis-item" :data="state.panel.typeDistribution" />
      </a-col>
      <a-col :span="6">
        <SaveArchiveNum class="analysis-item" :data="state.panel.threeMonthsData" />
      </a-col>
      <a-col :span="6">
        <BorrowSituation class="analysis-item" :data="state.panel.threeMonthsData" />
      </a-col>
      <a-col :span="6">
        <InventoryTaskNum class="analysis-item" :data="state.panel.threeMonthsData" />
      </a-col>
      <a-col :span="6">
        <NewArchiveNum class="analysis-item" :data="state.panel.sixMonthsData" />
      </a-col>
      <a-col :span="6">
        <PageArchiveNum class="analysis-item" :data="state.panel.sixMonthsData" />
      </a-col>
      <a-col :span="6">
        <ElcArchiveNum class="analysis-item" :data="state.panel.sixMonthsData" />
      </a-col>
      <a-col :span="6">
        <DestroyFileNum class="analysis-item" :data="state.panel.threeMonthsData" />
      </a-col>
    </a-row>
  </div>
</template>
<script lang="ts" setup>
import { nextTick, onMounted, reactive } from 'vue';
import ArchiveType from './components/archiveType.vue';
import SaveArchiveNum from './components/saveArchiveNum.vue';
import BorrowSituation from './components/borrowSituation.vue';
import InventoryTaskNum from './components/inventoryTaskNum.vue';
import NewArchiveNum from './components/newArchiveNum.vue';
import PageArchiveNum from './components/pageArchiveNum.vue';
import ElcArchiveNum from './components/elcArchiveNum.vue';
import DestroyFileNum from './components/destroyFileNum.vue';
import { boardData, boardLastSixMonthsData, boardLastThreeMonthsData, boardTypeDistribution } from '@/config/api/statement';
import { folderTree } from '@/config/api/archives';

const state = reactive({
  locationId: '',
  // 看板数据
  statList: [
    {
      title: '档案数据',
      key: 'archiveData',
      data: [
        {
          key: 'totalNum',
          name: '档案总数',
          value: null,
          imgSrc: new URL('@/assets/img/panel/archiveTotal.png', import.meta.url).href
        },
        {
          key: 'inLibraryNum',
          name: '在库数量',
          value: null,
          imgSrc: new URL('@/assets/img/panel/archiveInStock.png', import.meta.url).href
        },
        {
          key: 'pageFileNum',
          name: '纸质档案数量',
          value: null,
          imgSrc: new URL('@/assets/img/panel/archiveNum.png', import.meta.url).href
        },
        {
          key: 'elcFileNum',
          name: '电子档案数量',
          value: null,
          imgSrc: new URL('@/assets/img/panel/archiveElNum.png', import.meta.url).href
        },
        {
          key: 'pageFileBorrowNum',
          name: '纸质档案借阅数量',
          value: null,
          imgSrc: new URL('@/assets/img/panel/archiveBorrowed.png', import.meta.url).href
        },
        {
          key: 'elcFileBorrowNum',
          name: '电子档案借阅数量',
          value: null,
          imgSrc: new URL('@/assets/img/panel/archiveElBorrowedNum.png', import.meta.url).href
        }
      ]
    },
    {
      title: '档案任务',
      key: 'archiveTask',
      data: [
        {
          key: 'tobeSaveNum',
          name: '待存档数',
          value: null,
          imgSrc: new URL('@/assets/img/panel/taskPendNum.png', import.meta.url).href
        },
        {
          key: 'inventoryTaskNum',
          name: '盘点任务数',
          value: null,
          imgSrc: new URL('@/assets/img/panel/taskNum.png', import.meta.url).href
        },
        {
          key: 'destroyTaskNum',
          name: '销毁任务数',
          value: null,
          imgSrc: new URL('@/assets/img/panel/taskInventoryNum.png', import.meta.url).href
        },
        {
          key: 'borrowTaskNum',
          name: '借阅任务数',
          value: null,
          imgSrc: new URL('@/assets/img/panel/taskBorrowNum.png', import.meta.url).href
        },
        {
          key: 'renewTaskNum',
          name: '续借任务数',
          value: null,
          imgSrc: new URL('@/assets/img/panel/taskRenewNum.png', import.meta.url).href
        },
        {
          key: 'tobeReturnNum',
          name: '待归还档案数',
          value: null,
          imgSrc: new URL('@/assets/img/panel/taskToReturnNum.png', import.meta.url).href
        }
      ]
    }
  ],
  roomList: [
    {
      label: '全部',
      value: ''
    }
  ], // 档案室
  panel: {
    borrowAdventList: null, // 档案借阅临期
    typeDistribution: null, // 档案类型分布
    sixMonthsData: null, // 近六个月的数据
    threeMonthsData: null // 近三个月的数据
  }
});
onMounted(() => {
  nextTick(() => {
    // -webkit-background-clip属性不生效
    let arr = document.querySelectorAll<HTMLElement>('.background-text');
    let elementArray = Array.from(arr);
    for (let str of elementArray) {
      str.style['-webkit-background-clip'] = 'text';
    }
  });
});
getRoomData();
getBoardData();
getTypeDistribution();
getLastThreeData();
getLastSixData();
// 获取看板数据
function getBoardData() {
  const params = { id: state.locationId };
  boardData(params).then((res) => {
    if (res.success) {
      // 合并数组
      const list = state.statList.flatMap((item) => item.data);
      list.forEach((item) => {
        const { key } = item;
        if (Object.prototype.hasOwnProperty.call(res.data, key)) {
          item.value = res.data[key];
        }
      });
    }
  });
}
// 获取档案室数据
function getRoomData() {
  const params = { name: '' };
  folderTree(params).then((res) => {
    if (res.success) {
      res.data.forEach((item) => {
        state.roomList.push({
          label: item.name,
          value: item.id
        });
      });
    }
  });
}
// 获取档案类型分布
function getTypeDistribution() {
  const params = { id: state.locationId };
  boardTypeDistribution(params).then((res) => {
    if (res.success) {
      state.panel.typeDistribution = res.data;
    }
  });
}
// 获取近三个月的数据
function getLastThreeData() {
  const params = { id: state.locationId };
  boardLastThreeMonthsData(params).then((res) => {
    if (res.success) {
      state.panel.threeMonthsData = res.data.list;
    }
  });
}
// 获取近六个月的数据
function getLastSixData() {
  const params = { id: state.locationId };
  boardLastSixMonthsData(params).then((res) => {
    if (res.success) {
      state.panel.sixMonthsData = res.data.list;
    }
  });
}
// 选择档案室
function handleChange(rowId) {
  state.locationId = rowId;
  getBoardData();
  getTypeDistribution();
  getLastThreeData();
  getLastSixData();
}
</script>
<style lang="less" scoped>
.panel-wapper {
  width: 100%;
  height: 100%;
  padding: 0 16px;
  color: rgba(255, 255, 255, 0.65);
  background: #09102a;
  overflow-y: auto;
  .title-header {
    position: relative;
    .logo {
      width: 147px;
      margin: 16px 0 16px 8px;
    }
    .title {
      height: 78px;
    }
    .time {
      position: absolute;
      right: 0;
      top: 15px;
      font-size: 14px;
      color: rgba(255, 255, 255, 0.65);
      span:last-child {
        margin-left: 10px;
        font-size: 16px;
        color: #fff;
      }
    }
    .select {
      width: 141px;
      color: #fff;
      position: absolute;
      right: 0;
      bottom: 0;
      background-image: url('@/assets/img/panel/bitmap.png');
      background-size: 140px 32px;
      background-repeat: no-repeat;
      :deep(.ant-select-selector) {
        background-color: transparent;
      }
      :deep(.ant-select-arrow) {
        color: #fff;
      }
    }
  }
  .statistics {
    width: 100%;
    height: 148px;
    display: flex;
    align-items: center;
    margin-top: 16px;
    background: rgba(28, 53, 80, 0.49);
    position: relative;
    .stat-title {
      width: 48px;
      line-height: 22px;
      letter-spacing: 2px;
      margin-left: 23px;
      margin-right: 25px;
      display: inline-block;
      font-size: 20px;
      font-weight: bold;
      font-style: oblique;
      font-family: YouSheBiaoTiHei;
      color: #ffffff;
      background: linear-gradient(180deg, #ffffff 0%, #90deff 100%);
      // -webkit-background-clip: text;
      color: transparent;
    }
    .background-text {
      // background-clip: text;
    }
    .stat-content {
      display: flex;
      flex: 1;
      .stat-item {
        flex-grow: 1; /* 均分父元素空间 */
        flex-shrink: 1;
        display: flex;
        margin-left: 40px;
        padding-right: 40px;
        border-right: 1px solid rgba(109, 163, 240, 0.35);
        &:last-child {
          border-right: none;
        }
        img {
          display: inline-block;
          margin-right: 16px;
        }
        .stat-value {
          font-size: 32px;
          font-weight: bold;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #ffffff;
          line-height: 40px;
          background: linear-gradient(180deg, #daf1ff 0%, #73caff 100%);
          // -webkit-background-clip: text;
          color: transparent;
        }
        .background-text {
          // background-clip: text;
          // -webkit-background-clip: text;
        }
        .stat-label {
          margin-top: 4px;
          color: rgba(255, 255, 255, 0.65);
        }
      }
    }
  }
  .analysis {
    margin-top: 15px;
    .analysis-item {
      margin-bottom: 16px;
    }
  }
}
</style>
